<template>
  <div v-if="Object.keys(articleNume).length!=0">
    <div class="userLabel">
        <div class="MyArticle">
            <a href="">{{number}}</a>
            <a href="">{{Object.keys(articleNume).length}}</a>
        </div>
        <div class="img"><img src="https://i0.hdslb.com/bfs/face/475fcfdbf57284631522758d90a36df2b0398200.jpg@240w_240h_1c_1s.webp" /></div>
        <share class="contcat"></share>
    </div>
    <div class="nameMaxim">
      <h3>{{userData.name}}</h3>
      <h4 v-for="v in userData.motto">{{v}}</h4>
    </div>
  </div>
</template>
<script>
import Share from 'components/common/share/Share.vue';

export default {
  name: "user",
  props:{
    articleNume:{
      type:Object,
      default(){
        return {}
      }
    },
    userData:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data() {
    return {};
  },
  components:{
    Share
  },computed: {
    number(){
      //计算博文总数
      var keys = Object.keys(this.articleNume);
      return keys.reduce((i,k)=>{
        return this.articleNume[k]+i
      },0)
    }
  },
};
</script>
<style scoped>
.userLabel{
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  padding-top:20px ;
}
.MyArticle>a{
display: inline-block;
width: 40px;
text-align: center;
margin-left: 10px;
padding-top:30px ;
position: relative;
}
.MyArticle a:nth-child(1)::before{
  width: 100%;
  content: "文章";
  position: absolute;
   left: -1%;
  top: 0;
}
.MyArticle a:nth-child(2)::before{
  width: 40px;
  content: "标签";
  position: absolute;
  left: -1%;
  top: 0;
}
.img{
  display: flex;
  position: relative;
  margin-top: -100px;
  justify-content: center;
  align-content: center;
  width: 200px;
  height: 200px;
  border-radius:50% ;
  overflow: hidden;
}
.img>img{
  width: 100%;
}
.MyArticle{
  width: 250px;
}
.contcat{
  width: 250px;
}
.nameMaxim{
  text-align: center;
  margin-bottom: 100px;
}
.nameMaxim>h3{
margin-top: 40px;
font-size: 30px;
color: rgb(71, 71, 71);
}
.nameMaxim>h4{
margin-top: 20px;
font-size: 10px;
color: #ccc;
}
</style>